<template>
    <div class="charts-container">
        <div class="charts-date-type">
            <date-picker @getData="getData" :dateDataType="dateDataType" :date_interval="date_interval" size="small"></date-picker>
        </div>
        <div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">客户微信添加趋势</div>
                <router-link class="charts-more" v-if="admin_is_super == 1 || admin_id == 190" :to="{path: 'wechat-add-details'/*, query: {begin: date_interval[0], end:         date_interval[1]}*/}">
                    数据明细记录<i class="el-icon-d-arrow-right" />
                </router-link>
            </div>
            <div class="charts-content">
                <charts :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts>
            </div>
        </div>
        <div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">客户添加次数明细</div>
            </div>
            <div class="charts-content" style="padding-top: 0;">
                <Lists :searchContent="searchContent"/>
            </div>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import Lists from './wechat-add-lists.vue';
export default {
    data() {
        return {
            showParticleSize: false,
            searchContent: {
                data_type: 0,         // 类型
                begin_date: null,
                end_date: null
            },
            dataArr: {
                tooltip: {
                    valueSuffix: ' 次' // 数据列 y 值得后缀字符串
                },
                series: []
            },
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0,
        }
    },
    components: { datePicker, charts, Lists },
    created() {
        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        this.dateInterval = this.$route.params.dateInterval;
    },
    methods: {
        handleChange() {
            this.getData()
        },
        getData(dateInterval = null) {
            // 请求参数
            let datas = this.searchContent;
            if(this.dateInterval) {
                dateInterval = this.dateInterval;

                // 更新日期选中值 
                const  startDate = Date.parse(dateInterval[0]);
                const  endDate = Date.parse(dateInterval[1]);
                const diff_days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                if(diff_days <= 7) {
                    this.dateDataType = "visit_date_7"
                } else if(diff_days <= 30) {
                    this.dateDataType = "visit_date_30"
                } else {
                    this.dateDataType = "visit_date_custom"
                }
                this.date_interval = dateInterval;
                this.dateInterval = null;
            }

            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
                this.date_interval = dateInterval
                this.searchContent = datas
            }
            // 数据请求
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=wxAddStatistic', {params: datas})
            .then(res => {
                if(res.code == 1) {
                    // 视频连接次数
                    this.dataArr.series = [{
                        name: "添加次数",
                        // lineColor: '#1890FF',
                        color: '#1890FF',
		                data: res.data || [],
                    }];
                } else {
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss');
    .charts-container {
        box-shadow: none;
        width: calc(100% + 10px);
        height: calc(100% - 29px);
        margin: 0 -5px;
    }
    .charts-date-type { margin: 16px 0 0 4px; }
    .charts-box {
        background: #fff;
        box-shadow: 0px 0px 10px #ddd;
        box-sizing: border-box;
        height: calc(50% - 52px);
        margin: 15px 5px 2px;
        position: relative;
        flex-grow: 1;
        &:last-child {
            height: calc(50% - 40px)
        }
        .charts-more {
            top: 11px;
        }
        .charts-content {
            padding-top: 10px;
            /deep/ .chart-content { padding-bottom: 10px;}
        }
    }
</style>